<template>
  <div class="setContainer">
    <!-- 导航 -->
    <van-nav-bar
      title="设置"
      left-text=""
      left-arrow
      @click-left="onClickLeft"
    />
    <!-- 设置内容 -->
    <van-cell center title="查看通信录好友">
      <template #right-icon>
        <van-switch v-model="checked" size="24" />
      </template>
    </van-cell>
    <van-cell center title="水印照片">
      <template #right-icon>
        <van-switch v-model="checked1" size="24" />
      </template>
    </van-cell>
    <van-cell center title="内置音效">
      <template #right-icon>
        <van-switch v-model="checked2" size="24" />
      </template>
    </van-cell>
    <van-cell center title="无图模式">
      <template #right-icon>
        <van-switch v-model="checked3" size="24" />
      </template>
    </van-cell>
    <van-cell center title="截图后分享">
      <template #right-icon>
        <van-switch v-model="checked4" size="24" />
      </template>
    </van-cell>
    <van-cell center title="主题跟随系统">
      <template #right-icon>
        <van-switch v-model="checked5" size="24" />
      </template>
    </van-cell>
    <!-- 退出按钮 -->
    <van-button type="danger" size="large" @click="outLogin"
      >退出登录</van-button
    >
  </div>
</template>

<script>
export default {
  name: "Set",
  data() {
    return {
      checked: true,
      checked1: false,
      checked2: true,
      checked3: false,
      checked4: true,
      checked5: false,
    };
  },
  methods: {
    //回到登录页面
    onClickLeft() {
      this.$router.push("/login");
    },
    // 点击退出按钮
    outLogin() {
      //清除本地缓存
      localStorage.removeItem("user");
      //  清除仓库中的数据
      this.$store.commit("DELETEUSERINFO");
      // 跳转回本地
      this.$router.push("/login");
    },
  },
};
</script>

<style lang='less' scoped>
.setContainer {
  max-width: 375px;
  height: 100%;
  background: #eaeaea;
  .van-nav-bar {
    margin-bottom: 30px;
  }
  //设置内容
  .van-cell-group {
    width: 100%;
    height: 480px;
    margin-top: 40px;
    .van-switch-cell {
      margin: 4px 0;
    }
  } // 按钮
  .van-button {
    margin-top: 20px;
  }
}
</style>
